<template>
  <div class="main">
    <el-card>
        <div class="info-box">
            <div class="left-box">
                <el-row>
                    <el-col :span="6">
                        门店名称：<span>{{userObject.storeName||'未知'}}</span>
                    </el-col>
                    <el-col :span="6">
                        门店等级：<span>{{userObject.grade||'未知'}}</span>
                    </el-col>
                    <el-col :span="6">
                        负责人：<span>{{userObject.directorName||'未知'}}</span>
                    </el-col>
                    <el-col :span="6">
                        联系电话：<span>{{userObject.directorPhone||'未知'}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        关联用户：<span>{{userObject.directorId||'未知'}}</span>
                    </el-col>
                    <el-col :span="12">
                        门店地址：<span>{{userObject.detailAddress||'未知'}}</span>
                    </el-col>
                    <el-col :span="6">
                        创建时间：<span>{{userObject.createTime||'未知'}}</span>
                    </el-col>
                </el-row>
          </div> 
          <div class="right-box">
            <p>
                <el-image 
                style="width: 100px; height: 100px"
                :src="userObject.logo"
                :preview-src-list="[userObject.logo]">
              </el-image>
                <span>门店照片</span>
            </p>
            <p>
                <el-image 
                style="width: 100px; height: 100px"
                :src="userObject.licenseImage"
                :preview-src-list="[userObject.licenseImage]">
              </el-image>
                <span>营业执照</span>
            </p>
            <p>
                <el-image 
                style="width: 100px; height: 100px"
                :src="userObject.healthImage"
                :preview-src-list="[userObject.healthImage]">
              </el-image>
                <span>卫生许可</span>
            </p>
          </div>
        </div>
    </el-card>
    <el-card class="middle-box" style="margin-top:10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="上下级门店" name="1">
                <!-- {{recordsList}} -->
                <el-table
                :data="parentSonStoreList"
                v-loading="loading"
                :header-cell-style="{
                  background: '#f5f7fa',
                  color: '#000000',
                }"
                height="450"
                style="width: 100%"
              >
                  <el-table-column prop="storeName" label="门店名称"> </el-table-column>
                  <el-table-column prop="storeType" label="类型"> </el-table-column>
                  <el-table-column prop="storeGrade" label="门店级别"> </el-table-column>
                  <el-table-column prop="storeAddress" label="门店地址"> </el-table-column>
                  <el-table-column prop="storeConcat" label="联系人"> </el-table-column>
                  <el-table-column prop="storeConcatPhone" label="联系电话"> </el-table-column>
                  <el-table-column prop="relatedUser" label="关联用户账号"> </el-table-column>
                  <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getQueryParentSonStore" />
              </el-tab-pane>
              <el-tab-pane label="核销记录" name="2">
                <el-table
                :data="verifyRecordList"
                v-loading="loading"
                :header-cell-style="{
                  background: '#f5f7fa',
                  color: '#000000',
                }"
                height="450"
                style="width: 100%"
              >
                  <el-table-column prop="orderCode" label="关联订单编号"> </el-table-column>
                  <el-table-column prop="projectName" label="项目名称"> </el-table-column>
                  <el-table-column prop="verifyCount" label="核销次数"> </el-table-column>
                  <el-table-column prop="verifyMoney" label="核销分成"> </el-table-column>
                  <el-table-column prop="userInfo" label="下单用户信息"> </el-table-column>
                  <el-table-column prop="verifyTime" label="核销时间"> </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getQueryVerifyRecord" />
              </el-tab-pane>
              <el-tab-pane label="佣金明细" name="3">
         
                    <el-table
                    :data="storeCommissionList"
                    v-loading="loading"
                    :header-cell-style="{
                      background: '#f5f7fa',
                      color: '#000000',
                    }"
                    height="450"
                    style="width: 100%"
                  >
                      <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
                      <el-table-column prop="userInfo" label="下单用户信息"> </el-table-column>
                      <el-table-column prop="commissionType" label="佣金类型"> </el-table-column>
                      <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
                      <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
                      <el-table-column prop="quantity" label="数量"> </el-table-column>
                      <el-table-column prop="totalMoney" label="商品总价"> </el-table-column>
                      <el-table-column prop="commission" label="佣金"> </el-table-column>
                      <el-table-column prop="commissionStatus" label="佣金状态"> </el-table-column>
                      <el-table-column prop="payTime" label="支付时间"> </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getQueryStoreCommission" />
              </el-tab-pane>
              <el-tab-pane label="余额流水" name="4">
                <p class="tips">
                    <span>可提现余额：<i>{{withdrawMoney||'--'}}</i> </span>
                    <span>冻结中余额：<i>{{freezeMoney||'--'}}</i> </span>
                  </p>
                <el-table
                    :data="storeBalanceFlowList"
                    v-loading="loading"
                    :header-cell-style="{
                      background: '#f5f7fa',
                      color: '#000000',
                    }"
                    height="450"
                    style="width: 100%"
                  >
                      <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
                      <el-table-column prop="tradeType" label="交易类型"> </el-table-column>
                      <el-table-column prop="changeMoney" label="变动金额"> </el-table-column>
                      <el-table-column prop="currentMoney" label="当前余额"> </el-table-column>
                      <el-table-column prop="changeTime" label="变动时间"> </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getQueryStoreBalanceFlow" />
              </el-tab-pane>
        </el-tabs>
    </el-card>
    <el-card class="bottom-box">

    </el-card>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {getDetailInfo,queryParentSonStore,queryVerifyRecord,queryStoreCommission,queryStoreBalanceFlow} from '@/api/shop'
export default {
  name: '',
  components: {Pagination},
  props: {},
  data() {
    return {
        storeId:null,
        userObject:{},
        activeName:'1',
        queryParams:{
            storeId:null,
            pageNumber:1,
            pageSize:10
        },
        total:0,
        loading:true,
        parentSonStoreList:[],
        verifyRecordList:[],
        storeCommissionList:[],
        storeBalanceFlowList:[],
        withdrawMoney:null,
        freezeMoney:null,
    
    }
  },
  watch: {},
  computed: {},
  methods: {
    async getDetailInfo(storeId){
        const res = await getDetailInfo(storeId);
        console.log(res)
        this.userObject = res.data
    },
    handleClick(tab, event) {
      this.queryParams.pageNumber = 1
      this.queryParams.pageSize = 10
      switch (tab.name) {  
          case '1':  
            this.getQueryParentSonStore()
            break;  
          case '2':  
            this.getQueryVerifyRecord()
            break;  
          case '3':  
            this.getQueryStoreCommission()
            break;  
          case '4':  
            this.getQueryStoreBalanceFlow()
            break;  
         
          default:  
        
            break;  
        }
    },
    async getQueryParentSonStore(){
        const res = await queryParentSonStore(this.queryParams)
        this.loading = false
        this.parentSonStoreList = res.data.list
        this.total = res.data.total
    },
    async getQueryVerifyRecord(){
        const res = await queryVerifyRecord(this.queryParams)
        this.loading = false
        this.verifyRecordList = res.data.list
        this.total = res.data.total
    },
    async getQueryStoreCommission(){
        const res = await queryStoreCommission(this.queryParams)
        this.loading = false
        this.storeCommissionList = res.data.list
        this.total = res.data.total
    },
    async getQueryStoreBalanceFlow(){
        const res = await queryStoreBalanceFlow(this.queryParams)
        this.loading = false
        this.storeBalanceFlowList = res.data.list
        this.withdrawMoney = res.data.withdrawMoney
        this.freezeMoney = res.data.freezeMoney
        this.total = res.data.total
    },
  },
  created() {
    this.storeId = Number(this.$route.query.storeId)
    this.queryParams.storeId =   Number(this.$route.query.storeId)
    this.getDetailInfo(this.storeId)
    this.getQueryParentSonStore()
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .middle-box{
        position: relative;
        height: calc(100vh - 192px - 50px - 84px - 200px);
    }
    .bottom-box{
        height: 200px;
        margin-top: 10px;
    }
}
.info-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-box{
        width: 70%;
        .el-row + .el-row{
            margin-top: 20px;
        }
        .el-col{
            color: #999;
            span{
                color: #000  !important;
            margin-left: 5px;            }
        }
    }
    .right-box{
        display: flex;
        p{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 5px;
            .el-image {
                width: 75px;
                height: 75px;
                margin-bottom: 5px;
            }
            span{
                font-size: 12px;
                color: #999;
            }
        }
    }
}
.tips{
 
    span{
      color: #999;
      margin-right: 16px;
    }
    i{
      font-style: normal;
      color: #000;
    }
  }
</style>